<template>
  <view>论坛页</view>
  <view>
    <LoadMoreList ref="loadMoreList" :request-fn="getCarouselImageList">
      <template #default="{ list }">
        <view class="list">
          <view v-for="(item, index) in list as ForumType.ICarouselImageRes[]" :key="index" class="mb-4 rounded-lg bg-white p-4 shadow-md transition-shadow hover:shadow-lg">
            <view class="mb-2 text-lg text-gray-800 font-bold">
              {{ item.title }}
            </view>
            <view class="inline-block rounded bg-gray-100 px-2 py-1 text-sm text-gray-600">
              {{ item.serModule }}
            </view>
          </view>
        </view>
      </template>
    </LoadMoreList>
  </view>
  <u-button type="primary" @click="refresh">
    刷新
  </u-button>
</template>

<script setup lang='ts' name='forum'>
import { getCarouselImageList } from '@/api/forum';
import type * as ForumType from '@/api/forum/type';
import LoadMoreList from '@/components/LoadMoreList.vue';

const loadMoreList = ref<InstanceType<typeof LoadMoreList>>();

const refresh = () => {
  // loadMoreList.value?.refresh();
  loadMoreList.value?.onReachBottom();
};
</script>

<style lang='scss' scoped>

</style>
